import React, { FC, useState } from 'react';
import { Select, Button, Card, Table, Switch, Modal, Input, Space, Pagination, Form } from 'antd'; // 引入 Modal 和 Input 组件
import './certification1.css';

const { Option } = Select;

const SchoolInfoAudit: FC = () => {
  const [form] = Form.useForm();
  const [visible, setVisible] = useState(false); // 控制 Modal 可见性
  const [newBatch, setNewBatch] = useState({
    batchNumber: '',
    batchName: '',
    status: true,
    template: '',
  });

  const handleExport = () => {
    console.log('导出数据');
  };

  const initialDataSource = [
    {
      key: '1',
      batchNumber: '001',
      batchName: '第一批次',
      status: true,
      template: '模板A',
      createTime: '2024-01-01',
    },
    {
      key: '2',
      batchNumber: '002',
      batchName: '第二批次',
      status: false,
      template: '模板B',
      createTime: '2024-01-02',
    },
    {
      key: '3',
      batchNumber: '003',
      batchName: '第三批次',
      status: true,
      template: '模板C',
      createTime: '2024-01-03',
    },
    {
      key: '4',
      batchNumber: '004',
      batchName: '第四批次',
      status: '进行中',
      template: '模板D',
      createTime: '2024-01-04',
    },
    {
      key: '5',
      batchNumber: '005',
      batchName: '第五批次',
      status: '已完成',
      template: '模板E',
      createTime: '2024-01-05',
    },
    {
      key: '6',
      batchNumber: '006',
      batchName: '第六批次',
      status: '未开始',
      template: '模板F',
      createTime: '2024-01-06',
    },
    {
      key: '1',
      batchNumber: '001',
      batchName: '第一批次',
      status: true,
      template: '模板A',
      createTime: '2024-01-01',
    },
    {
      key: '2',
      batchNumber: '002',
      batchName: '第二批次',
      status: false,
      template: '模板B',
      createTime: '2024-01-02',
    },
    {
      key: '3',
      batchNumber: '003',
      batchName: '第三批次',
      status: true,
      template: '模板C',
      createTime: '2024-01-03',
    },
    {
      key: '4',
      batchNumber: '004',
      batchName: '第四批次',
      status: '进行中',
      template: '模板D',
      createTime: '2024-01-04',
    },
    {
      key: '5',
      batchNumber: '005',
      batchName: '第五批次',
      status: '已完成',
      template: '模板E',
      createTime: '2024-01-05',
    },
    {
      key: '6',
      batchNumber: '006',
      batchName: '第六批次',
      status: '未开始',
      template: '模板F',
      createTime: '2024-01-06',
    },
  ];

  const [dataSource, setDataSource] = useState(initialDataSource);

  const handleStatusChange = (key: string) => {
    setDataSource(prevData => prevData.map(item => (item.key === key ? { ...item, status: !item.status } : item)));
  };

  const handleDelete = (key: string) => {
    setDataSource(prevData => prevData.filter(item => item.key !== key));
  };

  const columns = [
    {
      title: '批次编号',
      dataIndex: 'batchNumber',
      key: 'batchNumber',
    },
    {
      title: '批次名称',
      dataIndex: 'batchName',
      key: 'batchName',
    },
    {
      title: '状态',
      key: 'status',
      render: (_, record) => <Switch checked={record.status} onChange={() => handleStatusChange(record.key)} />,
    },
    {
      title: '制证模版',
      dataIndex: 'template',
      key: 'template',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      key: 'createTime',
    },
    {
      title: '操作',
      key: 'action',
      align: 'center',
      render: (_, record) => (
        <span>
          <Button type="link">查看</Button>
          <Button type="link" style={{ color: 'red' }} onClick={() => handleDelete(record.key)}>
            删除
          </Button>
        </span>
      ),
    },
  ];

  const handleCreateBatch = () => {
    const newData = {
      key: (dataSource.length + 1).toString(),
      ...newBatch,
      createTime: new Date().toLocaleDateString(),
    };
    setDataSource([...dataSource, newData]);
    setVisible(false);
    setNewBatch({ batchNumber: '', batchName: '', status: true, template: '' });
  };
  // 弹框-------------------
  const layout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 16 },
  };
  const tailLayout = {
    wrapperCol: { offset: 6, span: 16 },
  };
  // 确定
  const onFinish = (values: any) => {
    console.log(values);
  };
  // 取消
  const onReset = () => {
    form.resetFields();
    setVisible(false);
  };

  return (
    <div>
      <div
        style={{
          backgroundColor: 'white',
          padding: '20px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          marginBottom: '20px',
          fontSize: '20px',
          fontWeight: 'bold',
        }}
      >
        制证批次
      </div>
      <Card
        style={{
          borderRadius: '8px',
          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
          margin: '0px 25px',
        }}
      >
        <div className="slectr">
          <div className="selectr" style={{ display: 'flex', justifyContent: 'space-between', padding: '0 50px' }}>
            <div className="select_year" style={{ display: 'flex', alignItems: 'center' }}>
              <div>年份：</div>
              <Select defaultValue="请选择" style={{ width: 200 }}>
                <Option value="2024">2024</Option>
                <Option value="2023">2023</Option>
                <Option value="2022">2022</Option>
                <Option value="2021">2021</Option>
                <Option value="2020">2020</Option>
              </Select>
            </div>
            <div style={{ display: 'flex', alignItems: 'center' }}>
              <div>批次名称：</div>
              <Select defaultValue="请输入" style={{ width: 250 }}>
                <Option value="第一批次">第一批次</Option>
                <Option value="第二批次">第二批次</Option>
                <Option value="第三批次">第三批次</Option>
                <Option value="第四批次">第四批次</Option>
                <Option value="第五批次">第五批次</Option>
              </Select>
            </div>

            <Space>
              <Button type="primary" onClick={handleExport}>
                查询
              </Button>
              <Button onClick={handleExport}>重置</Button>
            </Space>
          </div>
          <div className="ytitle">
            <Button type="primary" onClick={() => setVisible(true)} style={{ margin: '20px 30px' }}>
              新建批次
            </Button>
          </div>
          <div className="menu">
            <Table dataSource={dataSource} columns={columns} pagination={false} />
            <div style={{ display:"flex",justifyContent:'space-between',alignItems:'center',padding:'0 50px'}}>
              <div style={{ color:'#666666'}}>共 40 条 记 录&emsp;第 1 / 20 页</div>
              <Pagination
                className="zzpc_pagination"
                style={{ margin: '20px 0' }}
                align="center"
                total={initialDataSource.length}
                showSizeChanger
                showQuickJumper
            />
            </div>
          </div>
        </div>
      </Card>

      {/* 弹出窗口 */}
      <Modal title="创建建证批次" visible={visible} footer={null} onOk={handleCreateBatch} closable={false}>
        <Form {...layout} form={form} name="control-hooks" onFinish={onFinish} style={{ maxWidth: 600 }}>
          <Form.Item name="批次名称" label="批次名称" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item name="毕业年份" label="毕业年份" rules={[{ required: true }]}>
            <Select placeholder="请选择">
              <Option value="male">2003</Option>
              <Option value="female">2008</Option>
              <Option value="other">2004</Option>
            </Select>
          </Form.Item>

          <Form.Item name="制证模板选择" label="制证模板选择" rules={[{ required: true }]}>
            <Select placeholder="请输入">
              <Option value="A模板">A模板</Option>
              <Option value="B模板">B模板</Option>
              <Option value="C模板">C模板</Option>
            </Select>
          </Form.Item>

          <Form.Item {...tailLayout}>
            <Space>
              <Button htmlType="button" onClick={onReset}>
                取消
              </Button>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
};

export default SchoolInfoAudit;
